<template>
  <div class="companyDetails">
    <div class="top">
      <el-button style="width:41px;height:41px;padding:0;position:relative;top:-35px;left:-50px;" @click="toOld">old</el-button>
      <span class="btn" style="display:none;">Channel</span>
      <span class="name">
        <span v-if="searchTag.bpNumber">(ID: {{searchTag.bpNumber}}) </span>
        {{searchTag.tagTitle}}
      </span>
      <!--<span class="name">京东商城</span>-->
      <span class="group" v-if="searchTag.result_flag === 'account'">{{$t('search.Group')}}:{{searchTag.tagTitle}}</span>
      <span class="group" v-if="searchTag.result_flag === 'bp'">{{$t('search.newCustor')}}:{{searchTag.tagTitle}}</span>
      <!--等待接口ready,对接爬虫接口企业股票价格信息-->
      <span class="stock" style="display:none;">Stock:45.23 -2.33</span>
      <div class="right">
        <el-button size="small">关注</el-button>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <el-button size="small">添加模块</el-button>
      </div>
    </div>
    <div class="two-tags">
      <p @click="selectTag('0')" :class="{changeColor:activeTag === '0'}">{{$t('companyDetails.partCont1.title')}}</p>
      <p class="split-line">|</p>
      <p @click="selectTag('1')" :class="{changeColor:activeTag === '1'}">{{$t('companyDetails.partCont2.title')}}</p>
    </div>
    <div class="two-tagsTab">
      <div class="CBI-Tag" v-show="activeTag === '0'">
        <el-card>
          <!--<div class="title">{{$t('companyDetails.partCont1.title')}}</div>-->
          <tagSystem></tagSystem>
          <div class="scoreTable">
            <span class="score" v-if="language === 'en'" v-for="item in scoreSystemList">{{item.enName}}</span>
            <span class="score" v-if="language === 'zh'" v-for="item in scoreSystemList">{{item.zhName}}</span>
          </div>
        </el-card>
      </div>
      <div class="User-defined-Tag" v-show="activeTag === '1'">
        <el-card>
          <div style="position: relative;">
            <!--<div class="title">{{$t('companyDetails.partCont2.title')}}</div>-->
            <tagEdit></tagEdit>
          </div>
        </el-card>
      </div>
    </div>
    <div class="basefour">
      <el-card>
        <!--         <el-tabs v-model="activeName" @tab-click="handleClick">
                  <el-tab-pane class="cbi">
                    <span slot="label">客户档案</span>
                  </el-tab-pane>
                  <el-tab-pane>
                    <span slot="label">客户价值</span>
                  </el-tab-pane>
                  <el-tab-pane>
                    <span slot="label">售后服务</span>
                  </el-tab-pane>
                  <el-tab-pane>
                    <span slot="label">交易明细</span>
                  </el-tab-pane>
                </el-tabs> -->
        <!--         <div class="fourSelect">
                  <div @click="selectFour('0')">客户档案</div>
                  <div :class="{underline:activeName === '0'}"></div>
                </div>
                <div class="fourSelect">
                  <div @click="selectFour('1')">客户价值</div>
                  <div :class="{underline:activeName === '1'}"></div>
                </div>
                <div class="fourSelect">
                  <div @click="selectFour('2')">售后服务</div>
                  <div :class="{underline:activeName === '2'}"></div>
                </div>
                <div class="fourSelect">
                  <div @click="selectFour('3')">交易明细</div>
                  <div :class="{underline:activeName === '3'}"></div>
                </div> -->
        <div class="fourSelect" @click="selectFour('0')">
          <div :class="{changeColor:activeName === '0'}">{{$t('companyDetails.fourSelect.select0')}}</div>
          <transition name="fade">
            <div class="underline" v-if="activeName === '0'"></div>
          </transition>
        </div>
        <div class="fourSelect" @click="selectFour('1')" >
          <div :class="{changeColor:activeName === '1'}">{{$t('companyDetails.fourSelect.select1')}}</div>
          <transition name="fade">
            <div class="underline" v-if="activeName === '1'"></div>
          </transition>
        </div>
        <div class="fourSelect" @click="selectFour('2')" >
          <div :class="{changeColor:activeName === '2'}">{{$t('companyDetails.fourSelect.select2')}}</div>
          <transition name="fade">
            <div class="underline" v-if="activeName === '2'"></div>
          </transition>
        </div>
        <div class="fourSelect" @click="selectFour('3')">
          <div :class="{changeColor:activeName === '3'}">{{$t('companyDetails.fourSelect.select3')}}</div>
          <transition name="fade">
            <div class="underline" v-if="activeName === '3'"></div>
          </transition>
        </div>
      </el-card>
    </div>
    <div class="CustomerProfitability" v-show="activeName === '1'">
        <div class="middle">
        <el-row class="partCont">
          <el-col :span="16">
            <div class="title">{{$t('companyDetails.partCont3.title')}}</div>
            <div class="img1">
              <div style="text-align: center;">
                <div class="name">{{$t('companyDetails.partCont3.name')}}</div>
                <div class="value" id="middleVal">{{comdify(middleVal.toString())}}</div>
              </div>
            </div>
            <div class="numbers">
              <div class="number" v-for="(value,key) in numbers" :key="key">
                <!--<div class="num-img">-->
                  <!--<img src="./images/num-icon.png" alt="">-->
                <!--</div>-->
                <el-tooltip placement="top" effect="light">
                  <div slot="content">{{key}}:{{comdify(value.toString())}}</div>
                  <el-progress type="circle" :percentage="value" status="success"
                               color="#45cca3" :show-text="false">
                  </el-progress>
                </el-tooltip>
                <div class="num-list">
                  <span class="name">{{key}}</span>
                  <span class="value">{{comdify(value.toString())}}</span>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="right" v-for="(value,key) in customerValue" :key="key">
              <div class="name">{{key}}</div>
              <div class="value">{{value}}</div>
            </div>
          </el-col>
        </el-row>
        <div class="bottomLine"></div>
        </div>
      <el-row>
        <div class="nowInvalueAndX">
          <el-row class="partCont">
          <el-col :span="16">
            <div class="title">{{$t('companyDetails.partCont4.title')}}</div>
            <div class="nodata" v-if="showNoData.noData1">No Data</div>
            <div class="newInValue"></div>
          </el-col>
          <el-col :span="8">
            <div class="tabThree">
              <!--<ul v-model="tabValue" @change="tabNowInvalue(tabValue)">-->
                <!--<li @click="highLight = '0'" :class="{bgColor: highLight === '0'}">Device</li>-->
                <!--<li @click="highLight = '1'" :class="{bgColor: highLight === '1'}">Rev</li>-->
                <!--<li @click="highLight = '2'" :class="{bgColor: highLight === '2'}">GP%</li>-->
              <!--</ul>-->
              <el-radio-group v-model="tab1" size="mini" @change="changeTab1(tab1)">
                <el-radio-button label="Device">{{$t('historical.Device')}}</el-radio-button>
                <el-radio-button label="Rev">{{$t('historical.Rev')}}</el-radio-button>
                <el-radio-button label="GP">{{$t('historical.GP1')}}</el-radio-button>
              </el-radio-group>
            </div>
            <div class="tabValue" v-for="(value,key) in echartsData.newInNumber" :key="key">
              <div class="name">{{key}}</div>
              <div class="value">{{comdify(value.toString())}}</div>
            </div>
          </el-col>
          </el-row>
            <div class="bottomLine"></div>
        </div>
      </el-row>
        <div class="conversionPotential">
          <el-row class="partCont">
          <el-col :span="11">
            <div class="title">{{$t('companyDetails.partCont5.title')}}</div>
            <span class="subTitle">{{$t('companyDetails.partCont5.potential')}}</span>
            <div class="nodata" v-if="showNoData.noData2">No Data</div>
            <div class="potential"></div>
          </el-col>
          <el-col :span="12" :offset="1" style="margin-top:30px;">
            <div class="tabThree">
              <!--<div class="tabChange">-->
              <!--<ul>-->
                <!--<li :class="{'changeBG': potentialConverBg === '1'}" @click="potentialConverBg = '1'">Order</li>-->
                <!--<li :class="{'changeBG': potentialConverBg === '2'}" @click="potentialConverBg = '2'">Shipment</li>-->
                <!--<li :class="{'changeBG': potentialConverBg === '3'}" @click="potentialConverBg = '3'">Service</li>-->
              <!--</ul>-->
              <el-radio-group v-model="tab2" size="mini" @change="changeTab2(tab2)">
                <el-radio-button label="Order">{{$t('companyDetails.partCont4.btn1')}}</el-radio-button>
                <el-radio-button label="Shipment">{{$t('companyDetails.partCont4.btn2')}}</el-radio-button>
                <el-radio-button label="Service">{{$t('companyDetails.partCont4.btn3')}}</el-radio-button>
              </el-radio-group>
            </div>
            <div class="imgChange">
              <span class="subTitle" style="margin-top:15px;">{{$t('companyDetails.partCont5.subTitle')}}</span>
              <div class="img2">
                <span class="value1">{{comdify(score.toString())}}</span>
                <span class="value2">{{comdify(geo_score.toString())}}</span>
              </div>
              <div class="img3">
                <span class="value1">{{comdify(score.toString())}}</span>
                <span class="value2">{{comdify(type_score.toString())}}</span>
              </div>
              <!--<img src="./images/images2.png" alt="">-->
              <!--<img src="./images/images3.png" alt="">-->
            </div>
          </el-col>
          </el-row>
          <div class="bottomLine"></div>
        </div>
        <div class="potentialValue partCont">
          <div class="title">{{$t('companyDetails.partCont6.title')}}</div>
          <div class="tabThree">
            <el-radio-group v-model="tab3" size="mini" @change="changeTab3(tab3)">
            <el-radio-button label="History">{{$t('companyDetails.partCont6.btn1')}}</el-radio-button>
            <el-radio-button label="Recent">{{$t('companyDetails.partCont6.btn2')}}</el-radio-button>
            </el-radio-group>
            <!--div class="tabChange">-->
            <!--<ul>-->
              <!--<li :class="{'changeBG': potentialValueBg === '1'}" @click="potentialValueBg = '1'">History</li>-->
              <!--<li :class="{'changeBG': potentialValueBg === '2'}" @click="potentialValueBg = '2'">Recent</li>-->
            <!--</ul>-->
          </div>
          <el-row class="partCont">
            <el-col :span="8">
              <span class="subTitle">{{$t('companyDetails.partCont6.potentialEchart1')}}</span>
              <div class="nodata" v-if="showNoData.noData3">No Data</div>
              <div class="potentialEchart1 potential"></div>
            </el-col>
            <el-col :span="8">
              <span class="subTitle">{{$t('companyDetails.partCont6.potentialEchart2')}}</span>
              <div class="nodata" v-if="showNoData.noData4">No Data</div>
              <div class="potentialEchart2 potential"></div>
            </el-col>
            <el-col :span="8">
              <span class="subTitle">{{$t('companyDetails.partCont6.potentialEchart3')}}</span>
              <div class="nodata" v-if="showNoData.noData5">No Data</div>
              <div class="potentialEchart3 potential"></div>
            </el-col>
          </el-row>
        </div>
    </div>
  </div>
</template>
<script>
  import {getUsername} from '../../../utils/auth'
  import {mapGetters} from 'vuex'
  import tagSystem from '../components/tagSystem'
  import tagEdit from '../components/tagEdit'

  export default {
    components: {
      tagSystem,
      tagEdit
    },
    data () {
      return {
        testPort: '', //http://10.116.38.238:8082
        activeTag: '0',
        scoreSystemList: [],
        searchTag: {
          bpNumber: '',
          tagTitle: '',
          result_flag: ''
        },
        tab1: 'Device',
        tab2: 'Order',
        tab3: 'History',
        echartsData: {
          nowInValue: {},
          nowInNumber: {},
          newInNumbers: {},
          newInNumber: {},
          convNumber: {},
          convInNumber: {},
          resConverPotentials: {},
          converPotential: {},
          potentialEcharts1: {},
          potentialEcharts2: {},
          potentialEcharts3: {}
        },
        showNoData: {
          noData1: false,
          noData2: false,
          noData3: false,
          noData4: false,
          noData5: false
        },
        score: 0,
        geo_score: 0,
        type_score: 0,
        middleVal: 0,
        resNumbers: {},
        numbers: {},
        sum: 0,
        status: 0,
        values: [],
        resCustomerValues: {},
        customerValue: {},
        activeName: '1',
        nowInValue: '',
        highLight: '0',
        potentialValueBg: '1',
        potentialConverBg: '1',
        converPotential: '',
        potential: {
          echarts1: '',
          echarts2: '',
          echarts3: ''
        },
        search_value: '',
        result_flag: ''
      }
    },
    computed: {
      ...mapGetters(['language', 'sidebar'])
    },
    watch: {
      language() {
        if(this.language === 'en'){
          this.numbers = this.resNumbers.data_en
          this.customerValue = this.resCustomerValues.data_en
          this.echartsData.converPotential = this.echartsData.resConverPotentials.data_en
          this.drawBarConverPotential(this.echartsData.converPotential,'#93b8e3','noData2',this.converPotential)
          if(this.tab1 === 'Device'){
            this.echartsData.newInNumbers = this.echartsData.nowInNumber.sell_in_qty
            this.echartsData.newInNumber = this.echartsData.newInNumbers.data_en
          } else if(this.tab1 === 'Rev'){
            this.echartsData.newInNumbers = this.echartsData.nowInNumber.sdrev
            this.echartsData.newInNumber = this.echartsData.newInNumbers.data_en
          }else if (this.tab1 === 'GP'){
            this.echartsData.newInNumbers = this.echartsData.nowInNumber.gross_profit
            this.echartsData.newInNumber = this.echartsData.newInNumbers.data_en
          }

        }else if(this.language === 'zh'){
          this.numbers = this.resNumbers.data_zh
          this.customerValue = this.resCustomerValues.data_zh
          this.echartsData.converPotential = this.echartsData.resConverPotentials.data_zh
          this.drawBarConverPotential(this.echartsData.converPotential,'#93b8e3','noData2',this.converPotential)
          if(this.tab1 === 'Device'){
            this.echartsData.newInNumbers = this.echartsData.nowInNumber.sell_in_qty
            this.echartsData.newInNumber = this.echartsData.newInNumbers.data_zh
          } else if(this.tab1 === 'Rev'){
            this.echartsData.newInNumbers = this.echartsData.nowInNumber.sdrev
            this.echartsData.newInNumber = this.echartsData.newInNumbers.data_zh
          }else if (this.tab1 === 'GP'){
            this.echartsData.newInNumbers = this.echartsData.nowInNumber.gross_profit
            this.echartsData.newInNumber = this.echartsData.newInNumbers.data_zh
          }
        }
      }
    },
    methods: {
      // 获取搜索参数
      getUrlParams() {
        this.search_value = this.$route.query.search_value
        this.result_flag = this.$route.query.result_flag
        this.searchTag.tagTitle = this.$route.query.resultTitle
        this.searchTag.bpNumber = this.$route.query.bpNumber
        this.searchTag.result_flag = this.$route.query.result_flag
      },
      params(){
        return {
          search_value: this.search_value,
          flag: this.result_flag,
          username: getUsername()
        }
      },
      // 千分位
      comdify(n) {
        var re = /\d{1,3}(?=(\d{3})+$)/g;
        var n1 = n.replace(/^(^-?\d+)((\.\d+)?)$/, function (s, s1, s2) {
          return s1.replace(re, "$&,") + s2
        })
        return n1
      },
      //数字自增到某一值动画参数（目标元素,自定义配置）
      numAutoPlusAnimation(targetEle, options) {
        let _this = this
        options = options || {}
        let targetObj = document.getElementById(targetEle)
        let time = options.time //总时间--毫秒为单位
        let finalNum = options.num //要显示的真实数值
        let regulator = options.regulator || 100 //调速器，改变regulator的数值可以调节数字改变的速度
        let step = finalNum / (time / regulator)/*每30ms增加的数值--*/
        let count = 0 //计数器
        let initial = 0

        let timer = setInterval(function() {
          count = count + step
          if(count >= finalNum) {
            clearInterval(timer)
            count = finalNum
          }
          //t未发生改变的话就直接返回
          //避免调用text函数，提高DOM性能
          let t = Math.floor(count)
          if(t == initial) return
          initial = t
          targetObj.innerHTML = _this.comdify(initial.toString())
        }, 30)
      },
      selectTag(data){
        this.activeTag = data
      },
      selectFour (data) {
        this.activeName = data
      },
      toOld () {
        this.$router.push({path: './newSearchResult', query: this.$route.query})
      },
      handleClick () {
        // console.log(this.activeName)
      },
      initEchartsDom () {
        this.nowInValue = this.echarts.init(document.getElementsByClassName('newInValue')[0], null, { renderer: 'canvas' })
        this.potential.echarts1 = this.echarts.init(document.getElementsByClassName('potentialEchart1')[0], null, { renderer: 'canvas' })
        this.potential.echarts2 = this.echarts.init(document.getElementsByClassName('potentialEchart2')[0], null, { renderer: 'canvas' })
        this.potential.echarts3 = this.echarts.init(document.getElementsByClassName('potentialEchart3')[0], null, { renderer: 'canvas' })
        this.converPotential = this.echarts.init(document.getElementsByClassName('potential')[0], null, { renderer: 'canvas' })
      },
      // CBI 标签 追加标签
      getAdditionalLabelForScoreTable (params){
        this.axios.post(`${this.testPort}/customerValues/additionalLabelForScoreTable.do`,params).then(response =>{
          if (response.status === 200) {
            let resData = response.data.data
            this.scoreSystemList = resData.rows
          }
        })
      },
      // 企业综合价值
      getCustomComprehensiveValue(params){
        this.axios.post(`${this.testPort}/customerValues/custormComprehensiveValue.do`,params).then(response =>{
          if (response.status === 200) {
            let resData = response.data.data
            this.resNumbers = resData
            this.numbers = this.language === 'en' ? this.resNumbers.data_en : this.resNumbers.data_zh
            let length = Object.keys(this.numbers).length
            if(length !== 0){
              let sum = 0
              for(let i in this.numbers){
                sum+= this.numbers[i]
                this.sum = sum
              }
              this.middleVal = Number((sum / length).toFixed(2))
              this.numAutoPlusAnimation('middleVal', {
                time: 2500,
                num: this.middleVal,
                regulator: 50
              })
            }else{
              this.middleVal = 0
            }
          }
        })
      },
      getComprehensiveTagAndWarnTag (params){
        this.axios.post(`${this.testPort}/customerValues/comprehensiveTagAndWarnTag.do`,params).then(response =>{
          if (response.status === 200) {
            let resData = response.data.data
            this.resCustomerValues = resData
            this.customerValue = this.language === 'en' ? this.resCustomerValues.data_en : this.resCustomerValues.data_zh
          }
        })
      },
      // 当前价值
      async loadNowInValue (params) {
        let res = await this.axios.post(`${this.testPort}/customerValues/fisQuarterCurrentValueByLately.do`, params)
        let resData = res.data.data
        this.echartsData.nowInValue = resData
        if(this.tab1 === 'Device'){
          this.drawNowInValue(this.echartsData.nowInValue.sell_in_qty)
        } else if(this.tab1 === 'Rev'){
          this.drawNowInValue(this.echartsData.nowInValue.sdrev)
        }else if (this.tab1 === 'GP'){
          this.drawNowInValue(this.echartsData.nowInValue.gross_profit)
        }
      },
      drawNowInValue(paramsData){
        if (paramsData.name.length !== 0) {
          let xAxisData = paramsData.name
          let data = paramsData.bar.value
          let legendData = []
          let barData = []
          for (let i in data) {
            legendData.push(data[i].name)
            barData.push({
              name: data[i].name,
              data: data[i].value,
              type: 'bar',
              barMaxWidth: 30,
              stack: 'sum'
            })
          }
          let option = {
            color: ['#ff5b00', '#4dcfa3', '#ffd34c', '#93b8e3'],
            tooltip: {
              confine: true,
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              },
              backgroundColor: 'rgba(255,255,255,1)',
              padding: [5, 10],
              textStyle: {
                color: '#7588E4'
              },
              extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
            },
            legend: {
              type: 'scroll',
              data: legendData,
              orient: 'vertical',
              align: 'right',
              right: 0,
              top: 40,
              bottom: 15
            },
            grid: {
              left: '3%',
              right: '25%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                axisTick: {
                  show: false
                },
                data: xAxisData
              }
            ],
            yAxis: [
              {
                type: 'value',
                name: '',
                min: 0,
                // max: 250,
                interval: 5,
                axisLabel: {
                  show: false
                },
                axisLine: {
                  show: false
                },
                splitLine: {
                  show: false
                },
                axisTick: {
                  show: false
                }
              }
            ],
            series: barData
          }
          this.showNoData.noData1 = false
          this.nowInValue.clear()
          this.nowInValue.setOption(option)
        } else {
          this.nowInValue.clear()
          this.showNoData.noData1 = true
        }
      },
      async getNowInNumber(params){
        let res = await this.axios.post(`${this.testPort}/customerValues/currentValueByRanKing.do`, params)
        let resData = res.data.data
        this.echartsData.nowInNumber = resData
        if(this.tab1 === 'Device'){
          this.echartsData.newInNumbers = this.echartsData.nowInNumber.sell_in_qty
          this.echartsData.newInNumber = this.language === 'en' ?this.echartsData.newInNumbers.data_en : this.echartsData.newInNumbers.data_zh
        } else if(this.tab1 === 'Rev'){
          this.echartsData.newInNumbers = this.echartsData.nowInNumber.sdrev
          this.echartsData.newInNumber = this.language === 'en' ?this.echartsData.newInNumbers.data_en : this.echartsData.newInNumbers.data_zh
        }else if (this.tab1 === 'GP'){
          this.echartsData.newInNumbers = this.echartsData.nowInNumber.gross_profit
          this.echartsData.newInNumber = this.language === 'en' ?this.echartsData.newInNumbers.data_en : this.echartsData.newInNumbers.data_zh
        }
      },
      changeTab1(tabBtn) {
        if (tabBtn === 'Device') {
          this.drawNowInValue(this.echartsData.nowInValue.sell_in_qty)
          this.echartsData.newInNumbers = this.echartsData.nowInNumber.sell_in_qty
          this.echartsData.newInNumber = this.language === 'en' ?this.echartsData.newInNumbers.data_en : this.echartsData.newInNumbers.data_zh
        } else if (tabBtn === 'Rev') {
          this.drawNowInValue(this.echartsData.nowInValue.sdrev)
          this.echartsData.newInNumbers = this.echartsData.nowInNumber.sdrev
          this.echartsData.newInNumber = this.language === 'en' ?this.echartsData.newInNumbers.data_en : this.echartsData.newInNumbers.data_zh
        } else if (tabBtn === 'GP') {
          this.drawNowInValue(this.echartsData.nowInValue.gross_profit)
          this.echartsData.newInNumbers = this.echartsData.nowInNumber.gross_profit
          this.echartsData.newInNumber = this.language === 'en' ?this.echartsData.newInNumbers.data_en : this.echartsData.newInNumbers.data_zh
        }
      },
      // 转化潜力
      async loadConverPotential (params) {
        let res = await this.axios.post(`${this.testPort}/customerValues/convPotentialByLoyalty.do`, params)
        let resData = res.data.data
        this.echartsData.resConverPotentials = resData
        this.echartsData.converPotential = this.language === 'en' ?this.echartsData.resConverPotentials.data_en : this.echartsData.resConverPotentials.data_zh
        this.drawBarConverPotential(this.echartsData.converPotential,'#93b8e3','noData2',this.converPotential)
      },
      drawBarConverPotential(paramsData,color,noData,echartsObj){
        if (paramsData.name.length !== 0) {
          let xAxisData = paramsData.name
          let data = paramsData.bar.value
          let option = {
            color: color,
            xAxis: {
              type: 'category',
              axisTick: {
                show: false
              },
              axisLabel: {
                color: '#666',
                fontSize: 14
              },
              data: xAxisData
            },
            yAxis: {
              type: 'value',
              axisLabel: {
                show: false
              },
              axisLine: {
                show: false
              },
              splitLine: {
                show: false
              },
              axisTick: {
                show: false
              }
            },
            tooltip: {
              confine: true,
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              },
              backgroundColor: 'rgba(255,255,255,1)',
              padding: [5, 10],
              textStyle: {
                color: '#7588E4'
              },
              extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
            },
            series: [{
              data: data,
              type: 'bar',
              barMaxWidth: 30
            }]
          }
          this.showNoData[noData] = false
          echartsObj.clear()
          echartsObj.setOption(option)
        } else {
          echartsObj.clear()
          this.showNoData[noData] = true
        }
      },
      drawBar(paramsData,color,noData,echartsObj){
        if (paramsData.name.length !== 0) {
          let xAxisData = paramsData.name
          let data = paramsData.bar.value
          let option = {
            color: color,
            grid: {
              bottom: '30%'
            },
            xAxis: {
              type: 'category',
              axisTick: {
                show: false
              },
              axisLabel: {
                rotate: 55,
                color: '#666',
                fontSize: 12
              },
              data: xAxisData
            },
            yAxis: {
              type: 'value',
              axisLabel: {
                show: false
              },
              axisLine: {
                show: false
              },
              splitLine: {
                show: false
              },
              axisTick: {
                show: false
              }
            },
            tooltip: {
              confine: true,
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              },
              backgroundColor: 'rgba(255,255,255,1)',
              padding: [5, 10],
              textStyle: {
                color: '#7588E4'
              },
              extraCssText: 'box-shadow: 0 3px 12px rgba(224,226,233,1)'
            },
            series: [{
              data: data,
              type: 'bar',
              barMaxWidth: 30
            }]
          }
          this.showNoData[noData] = false
          echartsObj.clear()
          echartsObj.setOption(option)
        } else {
          echartsObj.clear()
          this.showNoData[noData] = true
        }
      },
      async loadConverSatisficing (params) {
        let res = await this.axios.post(`${this.testPort}/customerValues/convPotentialBySatisficing.do`, params)
        let resData = res.data.data
        this.echartsData.convNumber = resData
        if(this.tab2 === 'Order'){
          this.drawConverSatisficing(this.echartsData.convNumber.Order)
        } else if(this.tab2 === 'Shipment'){
          this.drawConverSatisficing(this.echartsData.convNumber.Shipment)
        }else if (this.tab2 === 'Service'){
          this.drawConverSatisficing(this.echartsData.convNumber.Service)
        }
      },
      drawConverSatisficing(paramsData){
        this.score = paramsData.score
        this.geo_score = paramsData.geo_score
        this.type_score = paramsData.type_score
      },
      changeTab2(tabBtn) {
        if (tabBtn === 'Order') {
          this.drawConverSatisficing(this.echartsData.convNumber.Order)
        } else if (tabBtn === 'Shipment') {
          this.drawConverSatisficing(this.echartsData.convNumber.Shipment)
        } else if (tabBtn === 'Service') {
          this.drawConverSatisficing(this.echartsData.convNumber.Service)
        }
      },
      // 潜在价值
      async loadDataEcharts1 (params) {
        let res = await this.axios.post(`${this.testPort}/customerValues/potentialValueByFinalBu.do`, params)
        let resData = res.data.data
        this.echartsData.potentialEcharts1 = resData
        if(this.tab3 === 'Recent'){
          this.drawBar(this.echartsData.potentialEcharts1.Recent,'#4dcfa3','noData3',this.potential.echarts1)
        } else if(this.tab3 === 'History'){
          this.drawBar(this.echartsData.potentialEcharts1.History,'#4dcfa3','noData3',this.potential.echarts1)
        }
      },
      async loadDataEcharts2 (params) {
        let res = await this.axios.post(`${this.testPort}/customerValues/potentialValuebyPreference.do`, params)
        let resData = res.data.data
        this.echartsData.potentialEcharts2 = resData
        if(this.tab3 === 'Recent'){
          this.drawBar(this.echartsData.potentialEcharts2.Recent,'#ffd34c','noData4',this.potential.echarts2)
        } else if(this.tab3 === 'History'){
          this.drawBar(this.echartsData.potentialEcharts2.History,'#ffd34c','noData4',this.potential.echarts2)
        }
      },
      async loadDataEcharts3 (params) {
        let res = await this.axios.post(`${this.testPort}/customerValues/machineScopeOfMaintenance.do`, params)
        let resData = res.data.data
        this.echartsData.potentialEcharts3 = resData
        this.drawBar(this.echartsData.potentialEcharts3,'#93b8e3','noData5',this.potential.echarts3)
      },
      changeTab3(tabBtn) {
        if (tabBtn === 'History') {
          this.drawBar(this.echartsData.potentialEcharts1.History,'#4dcfa3','noData3',this.potential.echarts1)
          this.drawBar(this.echartsData.potentialEcharts2.History,'#ffd34c','noData4',this.potential.echarts2)
        } else if (tabBtn === 'Recent') {
          this.drawBar(this.echartsData.potentialEcharts1.Recent,'#4dcfa3','noData3',this.potential.echarts1)
          this.drawBar(this.echartsData.potentialEcharts2.Recent,'#ffd34c','noData4',this.potential.echarts2)
        }
      },
      initAllEcharts () {
        this.loadNowInValue(this.params())
        this.loadConverPotential(this.params())
        this.loadDataEcharts1(this.params())
        this.loadDataEcharts2(this.params())
        this.loadDataEcharts3(this.params())
      },
    },
    mounted () {
      this.getUrlParams()
      this.getAdditionalLabelForScoreTable(this.params())
      this.getCustomComprehensiveValue(this.params())
      this.getComprehensiveTagAndWarnTag(this.params())
      this.getNowInNumber(this.params())
      this.loadConverSatisficing(this.params())
      this.initEchartsDom()
      this.initAllEcharts()
    }
  }
</script>
<style lang="scss" scoped>
  .companyDetails{
    padding: 30px 46px 0 46px;
    font-family: 'MicrosoftYaHei';
    .nodata{
      width: 100%;
      height: 100%;
      text-align:center;
      position: relative;
      top:100px;
      z-index:1;
    }
    .el-card__body .el-tabs__nav-wrap::after {
      height:0 !important;
    }
    .top{
      .btn{
        display: inline-block;
        width:80px;
        height: 36px;
        background-color: #6557f2;
        line-height: 36px;
        text-align: center;
        font-size:14px;
        color:#fff;
        border-radius: 2px;
        cursor:pointer;
        &:hover{
          /*    background: #ecf5ff;*/
        }
      }
      .name{
        display: inline-block;
        font-size: 24px;
        color:#333;
        font-weight: bold;
        position: relative;
        top:3px;
      }
      .right{
        float:right;
      }
      .group, .stock{
        font-size:16px;
        font-family: 'ArialMT';
        color:#999;
      }
      .group{
        margin-left:15%;
      }
      .stock{
        margin-left: 20px;
      }
    }
    .tabChange{
      width:100%;
      /*height:72px;*/
      background:#fff;
      span{
        display: inline-block;
        text-align: center;
        width:24%;
        font-size:18px;
        color:#333;
        margin-top:25px;
        .item{
          cursor:pointer;
        }
        .item1:after{
          content:'';
          display: block;
          height:3px;
          width:85px;
          background:#f00;
          transform: translateX(25%);
        }
      }
    }
    .imgChange{
      margin-top: 20px;
      div{
        position:relative;
        display: inline-block;
        width:210px;
        height:210px;
        margin-top: 40px;
        span{
          position:absolute;
          left: 118px;
          display:block;
          color:#333;
          font-size:16px;
        }
        .value1{
          top:-5px;
        }
        .value2{
          top:22px;
        }
      }
      .img2{
        margin-left:2vw;
        margin-right:4vw;
        background:url("../images/images2.png") no-repeat;
      }
      .img3{
        background:url("../images/images3.png") no-repeat;
      }
    }
    .two-tags{
      p{
        display:inline-block;
        margin: 20px;
        cursor: pointer;
      }
      p:hover{
        color:#409EFF;
      }
      p.changeColor{
        color:#409EFF;
      }
    }
    .two-tagsTab{
      .title{
        font-weight: bold;
        color:#000;
        font-size: 20px;
      }
      .CBI-Tag{
        .score {
          display: inline-block;
          height: 30px;
          min-width: 80px;
          line-height: 30px;
          font-size: 12px;
          color: #333;
          text-align: center;
          background: #c1e7fe;
          border: 1px solid #0090e9;
          border-radius: 4px;
          padding: 0 10px;
          margin-left: 10px;
          margin-top: 10px;
        }
      }
    }
    .basefour{
      margin-top: 20px;
      .fourSelect{
        /*margin:0 8%;*/
        margin:0 5%;
        display: inline-block;
        text-align: center;
        cursor: pointer;
        font-size: 18px;
        color: #333;
        -webkit-user-select:none;
        -moz-user-select:none;
        -ms-user-select:none;
        user-select:none;
        .fade-enter-active, .fade-leave-active {
          transition: opacity .5s;
        }
        .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
          opacity: 0;
        }
        .changeColor{
          color:#ff5b00;
        }
        .underline{
          height:3px;
          /*background: #0090e9;*/
          background: #ff5b00;
          width:105%;
          margin-top:2px;
        }
      }
      span.event1{
        &:after{
          content: '';
          display: block;
          width:100%;
          height:5px;
          background: #f00;
        };
      };
    }
    .nowInvalueAndX{
      /*margin-top:20px;*/
    }
    .CustomerProfitability{
      background: #fff;
      margin-top: 30px;
      /*padding:20px 15px;*/
      .partCont{
        padding:20px 15px;
        .right:nth-child(2){
          padding-top: 47px;
        }
      }
      .bottomLine{
        width:100%;
        background:#ccc;
        height:1px;
        margin-top:12px;
        margin-bottom:12px;
      }
      .subTitle{
        margin-left:20px;
        margin-top:30px;
        display: block;
        font-family: 'MicrosoftYaHei';
        font-size: 14px;
        color: #000;
        /*width: 60px;*/
        font-weight: bold;
      }
      .title, .right .value{
        font-weight: bold;
        color:#000;
        font-size: 20px;
      }
      .right{
        padding-top:80px;
        /*padding-left:150px;*/
        .name{
          margin-top:20px;
          font-size: 16px;
        }
        .value {
          margin-top:17px;
        }
      }
      /*.title:before{*/
        /*content: '';*/
        /*display: inline-block;*/
        /*width:12px;*/
        /*height:12px;*/
        /*background: #c69;*/
        /*border-radius: 50%;*/
        /*margin-right:5px;*/
      /*}*/
      .newInValue{
        height:300px;
        width:600px;
      }
      .tabThree{
        ul,li{
          list-style-type: none;
          margin:0;
          padding:0;
          overflow:hidden;
        }
        ul{
          /*margin-left:49px;*/
          position: absolute;
          right: 2vw;
        }
        li{
          float:left;
          width:88px;
          height:23px;
          line-height: 23px;
          border:1px solid #0090e9;
          text-align: center;
          cursor:pointer;
        }
        li.bgColor{
          background:#0090e9;
          color:#fff;
        }
      }
      .tabValue{
        /*padding-left:95px;*/
        padding-top:80px;
        font-weight:bold;
        .name{
          display:inline-block;
          margin-right: 20px;
          color:#333;
          font-size:20px;
          font-family: 'MicrosoftYaHei-Bold';
          margin-top: 35px;
        }
        .value{
          display:inline-block;
          font-size: 45px;
          color:#ff5b00;
          font-family: 'MicorsoftYaHei-Bold';
        }
      }
      .middle{
        .img1{
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: 8vw;
          width:325px;
          height:277px;
          background:url("../images/images1.png") no-repeat;
          color:#666;
          font-weight: bold;
          .name{
            font-size:20px;
            margin-bottom: 10px;
            width:160px;
          }
          .value{
            font-size:36px;
          }
        }
        .numbers{
          margin-left:9px;
          .number{
            display:inline-block;
            margin-right:56px;
            .num-img{
              display:inline-block;
              width:67px;
              height: 69px;
              margin-right:17px;
            }
            .num-list{
              display:inline-block;
              color:#666;
              .name{
                display:block;
                font-size:16px;
              }
              .value{
                display:block;
                margin-top:10px;
                font-size:24px;
              }
            }
          }
        }
      }
    }
    .conversionPotential{
      /*padding: 20px 0;*/
      .title{
        font-size: 18px;
        font-family: 'MicrosoftYaHei-Bold';
        color:#000;
      }
      /*.title:before{*/
        /*content: '';*/
        /*display: inline-block;*/
        /*width:12px;*/
        /*height:12px;*/
        /*background: #c69;*/
        /*border-radius: 50%;*/
        /*margin-right:5px;*/
      /*}*/
      .potential{
        height:300px;
        width:100%;
      }
      .tabChange{
        span{
          display: inline-block;
          font-family: 'MicrosoftYaHei';
          font-size: 14px;
          color:#000;
          width:60px;
          font-weight: bold;
        }
        ul,li{
          list-style-type: none;
          margin:0;
          padding:0;
        }
        ul{
          position: absolute;
          top: 20px;
          right: -0.5vw;
          /*margin-left: 11.5px;*/
          overflow: hidden;
          display: inline-block;
          width:300px;
          vertical-align: middle;
          li{
            float:left;
            border:1px solid #0090e9;
            width: 88px;
            height:23px;
            text-align: center;
            line-height: 23px;
            border-left:none;
            cursor: pointer;
          }
          li:first-child{
            border-left:1px solid #0090e9;
          }
          li.changeBG{
            background: #0090e9;
            color:#fff;
          }
        }
      }
    }
    .potentialValue{
      .title{
        font-size: 18px;
        font-family: 'MicrosoftYaHei-Bold';
        color:#000;
        width:70%;
        display: inline-block;
        margin:0;
        padding:0;
      }
      .tabChange{
        display: inline-block;
        width:29%;
        height: 23px;
        ul, li{
          list-style-type: none;
          margin:0;
          padding:0;
        }
        ul{
          overflow: hidden;
          position: absolute;
          right:5.5vw;
          li{
            float:left;
            border:1px solid #0090e9;
            width: 88px;
            height:23px;
            text-align: center;
            line-height: 23px;
            border-left:none;
            cursor: pointer;
          }
          li:first-child{
            border-left:1px solid #0090e9;
          }
          li.changeBG{
            background: #0090e9;
            color:#fff;
          }
        }
      }
      /*.title:before{*/
        /*content: '';*/
        /*display: inline-block;*/
        /*width:12px;*/
        /*height:12px;*/
        /*border-radius: 50%;*/
        /*background: #7eaf0c;*/
        /*margin-right: 5px;*/
      /*}*/
      .potential{
        width:100%;
        height:300px;
      }
    }
  }
</style>
